<template>
    <view class="loginContainer" v-if="showMsg">
        <view class="login-box shadow">
            <uni-icons @click="close" class="close-icon" type="close" size="30"></uni-icons>
            <view class="tip">
                <text>为了您更好的使用，请先授权登录</text>
            </view>
            <view class="btns">
                <button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权登录</button>
            </view>
        </view>
    </view>
</template>

<script>
    import loginServer from '@/plugins/http/server/login'
    import myServer from '@/plugins/http/server/my'
    const { platCode, appkey, source } = require('@/assets/config')
    const { getOpenId, getPhone, minRegCustomer } = loginServer
    const { getCustomerInfo } = myServer
    export default {
        name: 'login-pop',
        props: {
            show: {
                type: Boolean,
                value: false
            }
        },
        data() {
            return {
                showMsg: false
            }
        },
        created() {
            this.showMsg = this.show
        },
        watch: {
            show(newV) {
                this.showMsg = newV
            }
        },
        methods: {
            close() {
                this.showMsg = false
                this.$emit('close')
            },
            autoRegister(mobile) {
                const regParams = {
                    appkey, //系统授权密钥
                    fullName: mobile, //姓名
                    mobile, //手机号码
                    platCode: 'hll', //平台编号
                    source //来源 老会员/门店/异业合作
                }
                minRegCustomer(regParams).then(res => {
                    this.getUserInfo(mobile, () => {
                        uni.hideLoading()
                        this.$emit('loginOk')
                    })
                }).catch(e => {
                    console.log(e)
                    uni.hideLoading()
                    uni.showToast({
                        icon: 'none',
                        title: '登录失败,请重新授权登录',
                    });
                })
            },
            getUserInfo(mobile, cb) {
                const query = {
                    platCode,
                    appkey,
                    mobile
                }
                getCustomerInfo(query).then(({ data }) => {
                    this.$store.dispatch('dispatchUserInfo', data)
                    cb && cb()
                }).catch(e => {
                    this.autoRegister(mobile)
                    console.log(e)
                })
            },
            login(cb) {
                uni.login({
                    provider: 'weixin',
                    success(res) {
                        if (res.code) {
                            cb && cb(res)
                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: '登录失败,请重新授权登录',
                            });
                        }
                    },
                    fail() {
                        uni.showToast({
                            icon: 'none',
                            title: '登录失败,请重新授权登录',
                        });
                    }
                })
            },
            getPhoneNumber(res) {
                if (res.detail.errMsg != 'getPhoneNumber:ok') {
                    return false;
                }
                const { encryptedData, iv } = res.detail;
                uni.showLoading({
                    title: '登录中...',
                    mask: true
                })
                this.login(resCode => {
                    const { code } = resCode
                    const platformWxappletId = '1'
                    getOpenId({ code, platformWxappletId }).then(res => {
                        const data = JSON.parse(res.data)
                        const { session_key, openid } = data
                        const phoneParams = { encryptedData, iv, session_key }
                        getPhone(phoneParams).then(res => {
                            const { phoneNumber, watermark: { appid } } = res.data
                            const wechatInfo = {
                                openId: openid,
                                phone: phoneNumber,
                                appId: appid
                            }
                            this.$store.commit('commitWechatInfo', wechatInfo)
                            this.getUserInfo(phoneNumber, () => {
                                uni.hideLoading()
                                uni.showToast({
                                    icon: 'none',
                                    title: '登录成功',
                                });
                                this.$emit('loginOk')
                            })
                        }).catch(e => {
                            uni.hideLoading()
                            uni.showToast({
                                icon: 'none',
                                title: '登录失败,请重新授权登录',
                            });
                        })
                    }).catch(e => {
                        console.log(e)
                        uni.hideLoading()
                        uni.showToast({
                            icon: 'none',
                            title: '登录失败,请重新授权登录',
                        });
                    })
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    @import 'index';
</style>
